<template>
  <div class="home-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>首页</span>
          <el-button type="danger" @click="userStore.logout">退出登录</el-button>
        </div>
      </template>
      <div class="button-group">
        <el-button type="primary" @click="handleDownload" :loading="downloading">
          下载Excel文件
        </el-button>
        <el-button type="success" @click="handleTemplateDownload" :loading="templateDownloading">
          下载模板生成文件
        </el-button>
      </div>
      
      <div class="upload-section">
        <el-upload
          class="excel-uploader"
          :http-request="customUpload"
          :show-file-list="false"
          accept=".xlsx,.xls"
          :before-upload="beforeUpload"
        >
          <el-button type="primary">上传Excel</el-button>
          <template #tip>
            <div class="el-upload__tip">
              只能上传 xlsx/xls 文件
            </div>
          </template>
        </el-upload>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/user'
import axios from '@/utils/axios'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const downloading = ref(false)
const templateDownloading = ref(false)

const handleDownload = async () => {
  downloading.value = true
  try {
    const response = await axios.get('/file/download-excel', {
      responseType: 'blob'
    })
    downloadFile(response, 'report.xlsx')
    ElMessage.success('文件下载成功')
  } catch (error) {
    ElMessage.error('文件下载失败')
  } finally {
    downloading.value = false
  }
}

const handleTemplateDownload = async () => {
  templateDownloading.value = true
  try {
    const response = await axios.get('/file/download-from-template', {
      responseType: 'blob'
    })
    downloadFile(response, `report_${new Date().getTime()}.xlsx`)
    ElMessage.success('模板文件下载成功')
  } catch (error) {
    ElMessage.error('模板文件下载失败')
  } finally {
    templateDownloading.value = false
  }
}

const downloadFile = (data, filename) => {
  const blob = new Blob([data], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
  })
  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', filename)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
}

const beforeUpload = (file) => {
  const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 
                  file.type === 'application/vnd.ms-excel'
  if (!isExcel) {
    ElMessage.error('只能上传Excel文件!')
    return false
  }
  return true
}

const customUpload = async (options) => {
  try {
    const formData = new FormData()
    formData.append('file', options.file)
    
    const response = await axios.post('/file/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    
    ElMessage.success('文件上传成功')
    options.onSuccess(response)
  } catch (error) {
    ElMessage.error('文件上传失败')
    options.onError(error)
  }
}
</script>

<style scoped>
.home-container {
  padding: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-card {
  max-width: 800px;
  margin: 0 auto;
}
.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.upload-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
.excel-uploader {
  text-align: center;
}
.el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 8px;
}
</style> 